<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>广播式websokect</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous">
</script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/sockjs-client/0.3.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script type="text/javascript">
	$(document).ready(function() 
	{
		var stompClient = null;
		function setConnected(connected) {
			document.getElementById("connect").disabled = connected;
			document.getElementById("disconnect").disabled = !connected;
			document.getElementById("conversationDiv").style.visibility = connected ? 'visible'
					: 'hidden';
			//        $("#connect").disabled = connected;
			//        $("#disconnect").disabled = !connected;
			$("#response").html();
		}
		setConnected();
		function connect() 
		{
			var socket = new SockJS('/guide-link-point');
			stompClient = Stomp.over(socket);
			stompClient.connect({}, function(frame) {
				setConnected(true);
				console.log('Connected:' + frame);
				//接收服务端发送给/topic/greetings的订阅消息
				stompClient.subscribe('/topic/msg', function(response) {
					console.log('zsk' + JSON.parse(response.body).msg);
					showResponse(JSON.parse(response.body).msg);
				})
			});
		}
		function disconnect() 
		{
			if (stompClient != null) {
				stompClient.disconnect();
			}
			setConnected(false);
			console.log('Disconnected');
		}
		function sendName() 
		{
			var name = $('#name').val();
			console.log('name:' + name);
			stompClient.send("/app/welcome", {}, JSON.stringify({
				'msg' : name
			}));
		}
		function showResponse(message)
		{
			$("#response").text(message);
		}
		
		$("#connect").click(function()
		{
			 connect();	 
		})
		$("#disconnect").click(function()
		{
			disconnect();	 
		})
		$("#sendName").click(function()
		{
			sendName(); 
		})
		
		
		//消息js
		var logClient=null;
		function connectLog() 
		{
			var socket = new SockJS('/guide-link-point');
			logClient = Stomp.over(socket);
			var logArea=$("#logArea textarea")
			var connectBnt=
			logClient.connect({}, function(frame) {
				//接收服务端发送给/topic/greetings的订阅消息
				logClient.subscribe('/topic/log', function(response) 
				{
					logArea.append(response.body)
					logArea.append("\n");
					var scrollTop = logArea[0].scrollHeight;  
					logArea.scrollTop(scrollTop); 
				})
			});
		}
		function disconnectLog() 
		{
			if (logClient != null) 
			{
				logClient.disconnect();
			}
			var logArea=$("#logArea textarea")
			logArea.text("");
		}
		$("#connectLog").click(function()
		{
			connectLog();
			$(this).attr("disabled", "true");
			$("#disconnectLog").removeAttr("disabled");
			
		})
		$("#disconnectLog").click(function()
		{
			disconnectLog();
			$(this).attr("disabled", "true");
			$("#connectLog").removeAttr("disabled");
		})
	});
</script>
</head>
<body class="container" onload="disconnect()">
	<div class="form-group">
		
	</div>
	<div class="container">
		 <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">websoekct send msg to web</h3>
            </div>
            <div class="panel-body">
              	<div class="form-group">
					<button id="connect" class="btn btn-primary">连接</button>
					<button id="disconnect" class="btn btn-warning" disabled="disabled">断开连接</button>
				</div>
				<div id="conversationDiv" class="form-group">
					<label class=" col-lg-1 control-label">输入</label>
					<div class="col-lg-3">
						<input class="form-control" type="text" id="name" />
					</div>
					<div class="col-lg-1">
						<button id="sendName" class="btn btn-primary form-control">发送</button>
					</div>		
					<p id="response"></p>
				</div>
            </div>
         </div>
         <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">日志显示</h3>
            </div>
            <div class="panel-body">
              	<div class="form-group">
					<button id="connectLog" class="btn btn-primary">连接日志</button>
					<button id="disconnectLog" class="btn btn-warning" disabled="disabled">断开连接</button>
				</div>
				<div id="logArea" class="form-group">
					<textarea class="form-control" style="background: black;color: white;" readonly="readonly" rows="10"></textarea>
				</div>
            </div>
         </div>
		<noscript>
			<h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2>
		</noscript>
	</div>
</body>
</html>